<template>
  <div class="container" v-show="isShow">
    <el-input
  v-model="arrayIn"
  placeholder="请输入需要排序的数组"
  class="inputArray"
  clearable/>
<el-button type="primary" class="butt" @click="getValue">完成</el-button>
<el-button type="primary" class="butt" @click="startSorting">排序</el-button>
<!-- 代码展示 -->
<el-button @click="visible = true" class="codeBut" plain type="warning">
    <b>代码实现</b>
  </el-button>
  <el-drawer v-model="visible" :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <h4 :id="titleId" :class="titleClass"><b>代码实现(c++)</b></h4>
      <el-button type="danger" @click="close" >
        <!-- <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon> -->
        Close
      </el-button>
    </template>
    <div class="code">
    void InsertionSort(int arr[], int n) {<br>
    for (int i = 1; i < n; i++) {<br>
            int key = arr[i];<br>
            int j = i - 1;<br>
            while (j >= 0 && arr[j] > key) {<br>
                arr[j + 1] = arr[j];<br>
                j--;}<br>
            arr[j + 1] = key;}}<br>
    </div>

  </el-drawer>
<div class="caption">
  <div class="spa">操作数:{{operand}}  &nbsp&nbsp{{symbol}}&nbsp&nbsp&nbsp  比较数:{{ comparand }}</div>
  <div class="spa"> 总比较次数：{{sum}} </div>
</div>

<transition-group name="list" tag="div" class="arrayContainer">  
    <div  
      v-for="(item, index) in arr"  
      :key="item.value"  
      :style="{ height: item.len, width: '50px', backgroundColor: item.color }"  
      class="child"  
    >  
    <div class="numb">
      {{item.value  }}
    </div>
    </div>  
  </transition-group>  
  
  </div>

</template>

<script setup>
import { ref,watch } from 'vue'
const visible = ref(false);
const sorting = ref(false);  
const arrayIn = ref('');
const operand = ref('');
const comparand = ref('');
const sum = ref(0);
const symbol = ref("");
const isShow = ref(true);
// 获得输入框中的值
let arr = ref([]) // 初始化为空数组  
let maxNum = ref(0) // 用于存储最大数  
// delay函数返回一个promise能够让下面的循环在循环体内部停止一段时间的循环
function delay(ms) {  
  return new Promise(resolve => setTimeout(resolve, ms));  
}  
const getValue = async() => {  
    arr.value = []
    sum.value = 0 
    operand.value = ''
    comparand.value = ''
    symbol.value = "";
    await delay(1000)   //为什么要延迟？

    const numbers = arrayIn.value.split(/,|，|\s+/).map(item => parseInt(item, 10))  
    maxNum.value = Math.max(...numbers) // 计算最大数  
    arr.value = numbers.map(item => ({  
    value: item,  
    len: `${(item / maxNum.value) * 320+20}px`, // 假设.arrayContainer的高度为400px，80%即为320px，然后按比例计算  
    color:"#6FD8D6"
    }))  
    console.log(arr.value);
}  

const startSorting = () => {  
if (!sorting.value) {  
  sorting.value = true;  
  sortArray();  
}  
};  

const sortArray = async () => {
  const len = arr.value.length;
  
  // 初始状态：第一个元素视为已排序
  arr.value[0].color = "#063"; 
  
  for (let i = 1; i < len; i++) {
    let j = i;
    const key = arr.value[j].value; // 当前待插入元素
    
    // 高亮当前操作元素
    arr.value[j].color = "#FFA500"; // 橙色标记插入元素
    operand.value = key;
    await delay(500);

    // 与已排序序列比较
    while (j > 0) {
      comparand.value = arr.value[j-1].value;
      sum.value++;
      
      // 高亮比较元素对
      arr.value[j-1].color = "#FF0000";
      arr.value[j].color = "#FFA500";
      await delay(700);

      // 比较逻辑
      if (arr.value[j-1].value > key) {
        symbol.value = ">";
        
        // 元素右移（模拟插入过程）
        // arr.value[j].value = arr.value[j-1].value;
        [arr.value[j], arr.value[j-1]] = [arr.value[j-1], arr.value[j]]; // 位置交换
        
        // 恢复颜色
        arr.value[j].color = "#6FD8D6";
        arr.value[j-1].color = "#6FD8D6";
        
        await delay(1000);
      } else {
        symbol.value = "<";
        await delay(700);
        break; // 找到插入位置
      }
      
      j--;
    }

    // 插入最终位置
    arr.value[j].value = key;
    arr.value[j].color = "#6FD8D6";
    if(j-1 >= 0) {
        arr.value[j-1].color = "#6FD8D6";
    }else{}
  }

  arr.value[j-1].color = "#6FD8D6";
  sorting.value = false; // 完成排序
};  

</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.container{
  width: 100%;
  height: 100%;
  background-color: #adc6ff;
  position: relative;
}
.inputArray{
  margin-top: 20px;
  margin-left: 50px;
  width: 400px;
  height: 50px;
  border:5px solid black;
  border-radius: 5px;
}

.butt{
  margin-top: 20px;
  height: 48px;
  width: 40px;
  margin-left: 10px;
}

.arrayContainer{
  width: 80vw;
  height: 400px;
  background-color: whitesmoke;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  margin-left: 50px;
  margin-top: 50px;
  border: 5px solid grey;
  border-radius: 10px;
}
.list-move {  
  transition: transform 1s;  
}  
  
/* 当元素被移除时应用的类 */  
.list-leave-active {  
  transition: all 0.5s;  
}  
  
/* 当元素被添加时应用的类 */  
.list-enter-active {  
  transition: all 0.5s;  
}  
  
/* 离开过渡的起始状态 */  
.list-leave-to {  
  transform: translateX(100%); /* 或者其他你想要的过渡效果 */  
  opacity: 0; /* 可选，用于淡出效果 */  
}  
  
/* 进入过渡的结束状态 */  
.list-enter {  
  transform: translateX(-100%); /* 反转的过渡效果 */  
  opacity: 0; /* 可选，用于淡入效果 */  
}

.numb{
  width: 100%;
  height: 20px;
  text-align: center;
  margin: 0 auto;
  bottom: 0;
  border-radius: 5px 5px 0 0 ;
  border: none;
}

.child{
 border-radius: 5px 5px 0 0 ;
}

.caption{
  width: 1500px;
  height: 100px;
  margin-left: 50px;
  margin-top: 100px;
}

.spa{
  text-align: center;
  font-size: 30px;
  width: 1500px;
  height: 50px;
}

.codeContainer{
  width: 100%;
  height: 100%;
  background-color: #66ccff;
}

.code{
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 30px;
}

.codeBut{
  width: 150px;
  height: 70px;
  right: 0;
  margin-top: 30px;
  margin-left: 40vw;
  font-size: 20px;
}
</style>

<!-- 展示代码 -->